<!DOCTYPE html>
<html>
    <head>
        <title>右键菜单</title>
        <script src="./eventUtil.js"></script>
        <style>
        .dropdown{
            font-size: 14px;
            font-variant: tabular-nums;
            line-height: 1.5;
            color: rgba(0, 0, 0, 0.65);
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
           
            z-index: 1050;
            display: block;
            height: 0;
            
        }
        .dropdown-menu{
            outline: none;
            position: relative;
            visibility: hidden;
            list-style-type: none;
            padding: 4px 0;
            margin: 0;
            text-align: left;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            background-clip: padding-box;
            -webkit-transform: translate3d(0, 0, 0);
        }
        .dropdown-menu-item{
            padding: 5px 12px;
            margin: 0;
            clear: both;
            font-size: 14px;
            font-weight: normal;
            color: rgba(0, 0, 0, 0.65);
            white-space: nowrap;
            cursor: pointer;
            line-height: 22px;
        }
        .dropdown-menu-item:hover{
            background-color: #409EFF;
        }
        .dropdown-out{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
        }
        body{
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
        }
        </style>
    </head>
    <body>
        <div oncontextmenu="return false">禁用右键菜单div</div>
        <div class="dropdown-out">
            <div class="dropdown">
                <ul id="myMenu" class="dropdown-menu">
                    <li class="dropdown-menu-item">menu1</li>
                    <li class="dropdown-menu-item">menu2</li>
                </ul>
            </div>
        </div>
        
        自定义右键菜单列表
        <div id="myDiv1" style="display: inline-block;">自定义菜单div1</div>
        <div id="myDiv2" style="display: inline-block;">自定义菜单div2</div>
        <div id="myDiv3" >自定义菜单div3</div>
        
        
        <script>
        let myList = ["myDiv1","myDiv2","myDiv3"]
        
        function menus(myDivId, myMenuId, event){
            EventUtil.addHandler(window, "load", function(event){
                const div = document.getElementById(myDivId);
                const menu = document.getElementById(myMenuId);
                EventUtil.addHandler(div, "contextmenu" ,function(event){
                    event = EventUtil.getEvent(event);
                    EventUtil.preventDefault(event);
                    
                    menu.style.left = event.clientX + "px" ;
                    menu.style.top = event.clientY + "px" ;
                    menu.style.visibility = "visible" ;
                });
                EventUtil.addHandler(document, "click", function(event){
                    menu.style.visibility = "hidden";
                });
            });
        }
        myList.forEach(item => {
            menus(item, "myMenu", event);
        })
        </script>
    </body>
</html>